<template>
<div class="seller" ref="seller">
	<div class="seller-content">
		<div class="overview">
			<h1 class="title">{{seller.name}}</h1>
			<div class="underline desc">
			<star :score="seller.score"></star>
			<span class="text">({{seller.ratingCount}})</span>
			<span class="text">月售{{seller.sellCount}}单</span>
			</div>
			<ul class="remark flex">
				<li class="block cell-main">
				<h2>起送价</h2>
					<div class="content">
						<span class="stress">{{seller.minPrice}}</span>元
					</div>
				</li>
				<li class="block cell-main">
				<h2>商家配送</h2>
					<div class="content">
						<span class="stress">{{seller.deliveryPrice}}</span>元
					</div>
				</li>
				<li class="block cell-main">
				<h2>平均配送时间</h2>
					<div class="content">
						<span class="stress">{{seller.deliveryTime}}</span>元
					</div>
				</li>
			</ul>
			<div class="favorite" @click="toggleFavorite">	
				<i class="iconfont icon-xin1" :class="{'active' :favorite}"></i>
				<span class="text">{{favoriteText}}</span>
			</div>
		</div>
		<split></split>
		<div class="bulletin">
			<h1 class="title">公告与活动</h1>
			<div class="content underline">
				<p class="content">{{seller.bulletin}}</p>
			</div>
			<ul class="supports" v-if="seller.supports">
				<li class="support-item underline" v-for="(item,index) in seller.supports">
					<span class="icon" :class="classMap[seller.supports[index].type]"></span>
					<span class="text">{{seller.supports[index].description}}</span>
				</li>
			</ul>
		</div>
		<split></split>
		<div class="pics">
			<h1 class="title">商家实景</h1>
			<div class="pic-wrapper" ref="picWrapper">
			<ul class="pic-list" ref="picList">
            <li class="pic-item" v-for="pic in seller.pics">
              <img :src="pic" width="120" height="90">
            </li>
          </ul>
			</div>
		</div>
		<split></split>
		<div class="info">
			<h1 class="title underline">商家信息</h1>
			<ul>
				<li class="info-item underline" v-for="info in seller.infos">{{info}}</li>
			</ul>
		</div>
	</div>
</div>
</template>

<script type="ecmascript-6">
import BScroll from 'better-scroll';
import star from '../star/star';
import split from '../split/split';
import {saveToLocal, loadFromLocal} from '../js/store';
export default{
  props:{
  	seller:{
  		type:Object
  	}
  },
  data(){ 
  	return{
  		favorite:false,
  		 classMap:['decrease', 'discount', 'special', 'invoice', 'guarantee']
  	} },
  computed:{
  	favoriteText(){
  		return this.favorite?'已收藏':'收藏';
  	}
  },
  watch: {
      'seller'() {
        this.$nextTick(() => {
          this._initScroll();
          this._initPics();
        });
      }
    },
   mounted() {
      this.$nextTick(() => {
        this._initScroll();
        this._initPics();
      });
    },
  components:{star,split},
  methods:{
   toggleFavorite(event) {
        if (!event._constructed) {
          return;
        }
        this.favorite = !this.favorite;
        saveToLocal(this.seller.id, 'favorite', this.favorite);
      },
  	 _initScroll() {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.seller, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      },
      _initPics() {
        if (this.seller.pics) {
          let picWidth = 120;
          let margin = 6;
          let width = (picWidth + margin) * this.seller.pics.length - margin;
          this.$refs.picList.style.width = width + 'px';
          this.$nextTick(() => {
            if (!this.picScroll) {
              this.picScroll = new BScroll(this.$refs.picWrapper, {
                scrollX: true,
                eventPassthrough: 'vertical'
              });
            } else {
              this.picScroll.refresh();
            }
          });
        }
      }
  }
}
</script>

<style rel="stylesheet" lang="less">
  .decrease{
  background: url('./reduce.png');background-size: 100% 100%;
}
.discount{
  background: url('./discount.png');background-size: 100% 100%; 
}
.special{
 background: url('./special.png');background-size: 100% 100%;  
}
.invoice{
  background: url('./piao.png');background-size: 100% 100%;  
}
.guarantee{
   background: url('./promise.png');background-size: 100% 100%;  
}
.seller{
	position: absolute;
	top: 8.85rem;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	.overview{
		position: relative;
		padding: 0.9rem;
		.text{
		display: inline-block;
		margin-right: 0.6rem;
		line-height: 0.9rem;
		vertical-align: top;
		font-size: 10px;
		color: #4d555d;
	}
	}
	.title{
		margin-bottom: 0.4rem;
		line-height: 0.7rem;
		color: #07111b;
		font-size: 14px;
	}
	.desc{
		padding-bottom: 0.9rem;
		position: relative;
		font-size: 0;
	}
	.star{
		display: inline-block;
		margin-right: 0.4rem;
		vertical-align: top;
		font-size: 0
	}
	.star-item{
		width: 0.75rem;
		height: 0.75rem;
		margin-right: 0.3rem;
	}
	
	.remark{
		padding-top: 0.9rem;
	}
	.block{
		text-align: center;
		border-right: 1px solid rgba(7,17,27,0.1);
		&:last-child{
			border: none;
		}
		h2{
			margin-bottom: 0.2rem;
			line-height: 0.5rem;
			font-size: 10px;
			color: #93999f;
		}
		.content{
			line-height: 1.2rem;
			font-size: 10px;
			color:#07111b; 
		}
		.stress{
			font-size: 1.2rem;
		}
	}
	.favorite{
		position: absolute;
		width: 2.5rem;
		right: 0.55rem;
		top: 0.9rem;
		text-align: center;
		.text{
			line-height: 0.5rem;
			font-size: 10px;
			color:#4d555d; 
			margin: 0;
		}
	}
	.icon-xin1{
		display: block;
		margin-bottom: 0.2rem;
		line-height: 1.2rem;
		font-size: 24px;
		color: #d4d6d9;
	}
	.icon-xin1.active{
		    color: #f01414;
	}
	.bulletin{
		padding: 0.9rem 0.9rem 0 0.9rem;
		.title{
			margin-bottom: 0.4rem;
			line-height: 0.7rem;
			color: #07111b;
			font-size: 14px;
		}
		.content-wrapper{
			padding: 0 0.6rem 0.8rem 0.6rem;
			position: relative;
		}
		.content{
			line-height: 1.2rem;
			font-size: 0.6rem;
			color: #f01414;
		}
		.supports-item{
	padding: 0.8rem 0.6rem;
	position: relative;
	font-size: 0;
		}
		.icon{
			display: inline-block;
			width: 0.8rem;
			height: 0.8rem;
			vertical-align: top;
			margin-right: 0.3rem;
			background-size: 0.8rem 0.8rem;
			background-repeat: no-repeat;
		}
		.support-item{
		    padding: 16px 12px;
    position: relative;
    font-size: 0;	
		}
		.text{
			line-height: 0.8rem;
			font-size: 12px;
			color:#07111b; 
		}
	}
}
.pics{
		padding: 0.9rem;
		.title{
			margin-bottom: 0.6rem;
			line-height: 0.7rem;
			color: #07111b;
			font-size: 14px;
		}
		.pic-wrapper{
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}
		.pic-item{
			display: inline-block;
			margin-right: 0.3rem;
			width: 6.0rem;
			height: 4.5rem;
		}
	}
	.info{
		padding: 0.9rem;
		color: #07111b;
		.title{
    padding-bottom: 12px;
    line-height: 14px;
    position: relative;
    font-size: 14px;
		}
		.info-item{
			    padding: 16px 12px;
    line-height: 16px;
    position: relative;
    font-size: 12px;
		}
	}
</style>